<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <h1>用户体验</h1>
</header>
<main>
    <section>
        <h2>29 选择适用的鼠标光标</h2>
        <section>
            <h3>提示禁用状态</h3>
            <button disabled>按钮</button>
        </section>
        <section>
            <h3>隐藏鼠标光标</h3>
            <div class="hide-cursor"></div>
        </section>
    </section>
    <section>
        <h2>30 扩大可点击区域</h2>
        <section>
            <h3>透明边框扩大点击区域</h3>
            <div class="hit-area-border">+</div>
        </section>
        <section>
            <h3>伪元素扩大点击区域</h3>
            <div class="hit-area">+</div>
        </section>
    </section>
    <section>
        <h2>31 自定义复选框</h2>
        <section>
            <h3>用label元素替代复选框</h3>
            <div class="checkboxes">
                <input type="checkbox" id="awesome">
                <label for="awesome">Awesome!</label>
            </div>
        </section>
        <section>
            <h3>开关式按钮</h3>
            <div class="toggle-buttons">
                <input type="checkbox" id="buttons">
                <label for="buttons">Awesome!</label>
            </div>
        </section>
    </section>
    <section>
        <h2>32 通过阴影来弱化背景</h2>
        <a href="./nativce-model.html">backdrop方案</a>
    </section>
    <section>
        <h2>33 通过模糊来弱化背景</h2>
        <a href="./deemphasizing-blur.html">模糊背景</a>
    </section>
    <section>
        <h2>34 滚动提示</h2>
        <ul class="scrolling-hints">
            <li>Ada Catlace</li>
            <li>Alan Purring</li>
            <li>Schrodingcat</li>
            <li>Tim Purrners-Lee</li>
            <li>Webkitty</li>
            <li>Json</li>
            <li>Void</li>
            <li>Neko</li>
            <li>NaN</li>
            <li>Cat5</li>
            <li>Vector</li>
        </ul>
    </section>
    <section>
        <h2>35 交互式的图片对比控件</h2>
        <section>
            <h3>resize方案</h3>
            <div class="image-slider">
                <div>
                    <img src="./main.jpeg" alt="Before">
                </div>
                <img src="./main.jpeg" alt="After">
            </div>
        </section>
        <section>
            <h3>范围输入控件方案</h3>
            <div class="range-slider">
                <img src="./main.jpeg" alt="Before">
                <img src="./main.jpeg" alt="After">
            </div>
        </section>
    </section>
    <script>
        window.addEventListener('load', function () {
            document.querySelectorAll('.range-slider').forEach(slider => {
                const div = document.createElement('div');
                const img = slider.querySelector('img');
                slider.insertBefore(div, img);
                div.appendChild(img);

                // 创建滑块
                const range = document.createElement('input');
                range.type = "range";
                range.oninput = function () {
                    div.style.width = this.value + '%';
                }
                slider.appendChild(range);
            })
        })
    </script>
</main>
</body>
</html>
